[#assign title]我的邀请记录[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<div class="row">
    <mt-cell class="col-12">
        <template slot="title">
            <span class="mint-cell-text">我的邀请人:<span class="text-danger">{{inviter.nickname || '无'}}</span></span>
            <span class="mint-cell-label">注册时间：</span>
        </template>
    </mt-cell>
    <mt-cell is-link to="/invite/history" class="col-12">
        <template slot="title">
            <span class="mint-cell-text text-danger">{{summation}}元</span>
            <span class="mint-cell-label">本期好友充值金额</span>
        </template>
        <template slot>历史情况</template>
    </mt-cell>
</div>
<div class="row">
    <div class="col-12 pre-scrollable"
         :style="{'max-height': inviteeHeight}">
        <mt-loadmore :top-method="refresh" ref="loadmore"
                     infinite-scroll-disabled="allLoaded" infinite-scroll-distance="30">
            <div class="media scrollable-border py-1" v-for="invitee in inviteeList">
                <img class="mr-2" :src="invitee.head | headImg" :alt="invitee.nickname"/>
                <div class="media-body">
                    <div class="d-flex justify-content-between">
                        <span>{{invitee.nickname}}</span>
                        <span class="d-flex align-items-center text-success"
                              v-if="invitee.balance && invitee.balance > 0">￥{{invitee.balance}}</span>
                        <span class="d-flex align-items-center text-danger" v-else>未充值</span>
                    </div>
                    <div class="text-muted">注册时间：{{invitee.createdDate | formatDate}}</div>
                </div>
            </div>
        </mt-loadmore>
        <div class="page-infinite-loading text-center">
            <span v-show="allLoaded">没有更多了</span>
            <span v-show="!allLoaded">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </span>
        </div>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            allLoaded: true,
            inviter: {},
            inviteeList: [],
            inviteeHeight: '0px'
        },
        methods: {
            /** 计算记录面板高度 */
            calcInviteeHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.inviteeHeight = vm.calcScrollHeight('.pre-scrollable') + 'px';
                });
            },
            refresh: function () {
                var vm = this;
                axios.post('/invite/list').then(function (response) {
                    vm.inviteeList = response.data;
                    vm.$refs.loadmore.onTopLoaded();
                }).catch(function (err) {
                    vm.$refs.loadmore.onTopLoaded();
                });
            }
        },
        computed: {
            summation: function () {
                var vm = this;
                var summation = 0;
                var data = vm.inviteeList;
                if (data) {
                    for (var index = 0; index < data.length; index++) {
                        summation = MoneyCalculate.accAdd(summation, data[index].balance);
                    }
                }
                return summation;
            }
        },
        filters: {},
        watch: {},
        mounted: function () {
            var vm = this;
            axios.post('/invite/inviter').then(function (response) {
                vm.inviter = response.data;
                vm.calcInviteeHeight();
            });
            vm.refresh();
        }
    });
</script>
[/#macro]